/**
 * v-if 和 v-for
 * 
 * 不推荐在同一元素使用 v-if 和 v-for
 */

const App = {
  data() {
    return {
      todoList: [
        {
          id: 1,
          content: 'CONTEXT 1',
          completed: false
        }, {
          id: 2,
          content: 'CONTEXT 2',
          completed: true
        }, {
          id: 3,
          content: 'CONTEXT 3',
          completed: true
        },
      ]
    }
  },
  /**
   * v-if 的优先级 高于 v-for
   * 
   * v-if 取不到 todo，而 v-for 后才有 todo
   * 
   * 在渲染期间-属性 todo确实被访问了
   * 但是 todo 并没有定义在实例上
   */
  template: `
    <ul>
      <template v-for="todo of todoList" :key="todo.id">
        <li  v-if="!todo.completed">{{ todo.content }}</li>
      </template>
      <!--
      <li v-for="todo of todoList" :key="todo.id" v-if="!todo.completed">
        {{ todo.content }}
      </li>
      -->
    </ul>
  `,
  computed: {
    NotCompletedTodoList() {
      return this.todoList.filter(item => !item.completed)
    }
  }
}

// Vue 2 先处理 v-for 再处理 v-if
// Vue 3 则是先处理 v-if 再循环 v-for

/**
 * 逻辑层级
 * 
 * if 应该 优先于 for
 * 
 * if 是渲不渲染
 * for 而是怎么渲染
 */

Vue.createApp(App).mount('#app')